<template>
  <div class='dashboard-container'>
    <!-- 头部内容 -->
    <el-card class='header-card'>
      <div>
        <div class='fl headL'>
          <div class='headImg'>
            <img :src='avatar' v-imagerr='defaultImg'>
          </div>
          <div class='headInfoTip'>
            <p class='firstChild'>早安，{{ name }}，祝你开心每一天！</p>
            <p class='lastChild'>{{ userInfo.username }} | {{ userInfo.companyName }}-{{ userInfo.departmentName }}</p>
          </div>
        </div>
        <div class='fr' />
      </div>
    </el-card>
    <!-- 主要内容 -->
    <el-row type='flex' justify='space-between'>
      <!-- 左侧内容 -->
      <el-col :span='13' style='padding-right:26px'>
        <!-- 工作日历 -->
        <el-card class='box-card'>
          <div slot='header' class='header'>
            <span>工作日历</span>
          </div>
          <!-- 放置日历组件 -->
          <work-calender></work-calender>
        </el-card>
        <!-- 公告 -->
        <el-card class='box-card'>
          <div class='advContent'>
            <div class='title'> 公告</div>
            <div class='contentItem'>
              <ul class='noticeList'>
                <li>
                  <div class='item'>
                    <img src='@/assets/common/img.jpeg' alt=''>
                    <div>
                      <p><span class='col'>朱继柳</span> 发布了 第1期“传智大讲堂”互动讨论获奖名单公布</p>
                      <p>2018-07-21 15:21:38</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class='item'>
                    <img src='@/assets/common/img.jpeg' alt=''>
                    <div>
                      <p><span class='col'>朱继柳</span> 发布了 第2期“传智大讲堂”互动讨论获奖名单公布</p>
                      <p>2018-07-21 15:21:38</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class='item'>
                    <img src='@/assets/common/img.jpeg' alt=''>
                    <div>
                      <p><span class='col'>朱继柳</span> 发布了 第3期“传智大讲堂”互动讨论获奖名单公布</p>
                      <p>2018-07-21 15:21:38</p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 右侧内容 -->
      <el-col :span='11'>
        <el-card class='box-card'>
          <div class='header headTit'>
            <span>流程申请</span>
          </div>
          <div class='sideNav'>
            <el-button @click='showDialog = true'>加班离职</el-button>
            <el-button disabled>请假调休</el-button>
            <el-button @click="$router.push('/users/approvals')">审批列表</el-button>
            <el-button @click="$router.push('/users/info')">我的信息</el-button>
          </div>
        </el-card>

        <!-- 绩效指数 -->
        <el-card class='box-card'>
          <div slot='header' class='header'>
            <span>绩效指数</span>
          </div>
          <!-- 放置雷达图 -->
          <radar></radar>
        </el-card>
        <!-- 帮助连接 -->
        <el-card class='box-card'>
          <div class='header headTit'>
            <span>帮助链接</span>
          </div>
          <div class='sideLink'>
            <el-row>
              <el-col :span='8'>
                <a href='#'>
                  <span class='icon iconGuide' />
                  <p>入门指南</p>
                </a>
              </el-col>
              <el-col :span='8'>
                <a href='#'>
                  <span class='icon iconHelp' />
                  <p>在线帮助手册</p>
                </a>
              </el-col>
              <el-col :span='8'>
                <a href='#'>
                  <span class='icon iconTechnology' />
                  <p>联系技术支持</p>
                </a>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 弹出层 -->
    <el-dialog :visible='showDialog' title='离职申请' @close='btnCancel'>
      <el-form
        ref='ruleForm'
        :model='ruleForm'
        status-icon
        label-width='110px'
        :rules='rules'
      >
        <!--离职表单-->
        <el-form-item label='离职时间' prop='end_time'>
          <el-date-picker
            v-model='ruleForm.exceptTime'
            type='datetime'
            value-format='yyyy-MM-dd HH:mm:ss'
            placeholder='选择日期时间'
          />
        </el-form-item>
        <el-form-item label='离职原因' prop='reason'>
          <el-input
            v-model='ruleForm.reason'
            type='textarea'
            :autosize='{ minRows: 3, maxRows: 8}'
            style='width: 70%;'
            placeholder='请输入内容'
          />
        </el-form-item>
      </el-form>
      <el-row slot='footer' type='flex' justify='center'>
        <el-col :span='6'>
          <el-button size='small' type='primary' @click='btnOK'>确定</el-button>
          <el-button size='small' @click='btnCancel'>取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { startProcess } from '@/api/approvals'
import { mapGetters, createNamespacedHelpers } from 'vuex'
import WorkCalender from '@/views/dashboard/components/work-calendar'
import radar from '@/views/dashboard/components/radar'

const { mapState } = createNamespacedHelpers('user')
export default {
  name: 'Dashboard',
  components: {
    WorkCalender,
    radar
  },
  data() {
    return {
      defaultImg: import('@/assets/common/bigUserHeader.png'),
      showDialog: false,
      ruleForm: {
        exceptTime: '',
        reason: '',
        processKey: 'process_dimission', // 特定的审批
        processName: '离职'
      },
      rules: {
        exceptTime: [{ required: true, message: '离职时间不能为空' }],
        reason: [{ required: true, message: '离职原因不能为空' }]
      }
    }
  },
  methods: {
    btnOK() {
      this.$refs.ruleForm.validate(async validate => {
        if (validate) {
          const data = { ...this.ruleForm, userId: this.userInfo.userId }
          await startProcess(data)
          this.$message.success('提交流程成功')
          this.btnCancel()
        }
      })
    },
    btnCancel() {
      this.showDialog = false
      this.$refs.ruleForm.resetFields()
      this.ruleForm = {
        exceptTime: '',
        reason: '',
        processKey: 'process_dimission', // 特定的审批
        processName: '离职'
      }
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar'
    ]),
    ...mapState(['userInfo'])
  }
}
</script>

<style lang='scss' scoped>
.dashboard-container {
  margin: 10px;

  li {
    list-style: none;
  }

  .headImg {
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #999;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .headInfoTip {
    padding: 25px 0 0;
    margin-left: 120px;

    p {
      padding: 0 0 15px;
      margin: 0;

      &.firstChild {
        font-size: 24px;
      }

      &.lastChild {
        font-size: 20px;
        color: #7f8c8d;
      }
    }
  }
}

.box-card {
  padding: 5px 10px;
  margin-top: 20px;

  .header {
    span {
      color: #2c3e50;
      font-size: 24px;
    }

    .item {
      color: #97a8be;
      float: right;
      padding: 3px 0;
    }
  }

  .headTit {
    span {
      border-bottom: 4px solid #8a97f8;
      padding-bottom: 10px;
    }
  }
}

.header-card {
  position: relative;

  .header {
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 1;
  }
}

.advContent {
  background: #fff;
  border-radius: 5px 5px 0px 0px;

  .title {
    font-size: 16px;
    padding: 20px;
    font-weight: bold;
    border-bottom: solid 1px #ccc;
  }

  .contentItem {
    padding: 0 30px;
    min-height: 350px;

    .item {
      display: flex;
      padding: 18px 0 10px;
      border-bottom: solid 1px #ccc;

      .col {
        color: #8a97f8;
      }

      img {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        margin-right: 10px;
      }

      p {
        padding: 0 0 8px;
      }
    }
  }
}

.noticeList {
  margin: 0;
  padding: 0;
}

.sideNav,
.sideLink {
  padding: 30px 0 12px;
}

.sideLink {
  text-align: center;

  .icon {
    display: inline-block;
    width: 76px;
    height: 76px;
    background: url('./../../assets/common/icon.png') no-repeat;
  }

  .iconGuide {
    background-position: 0 0;
  }

  .iconHelp {
    background-position: -224px 0;
  }

  .iconTechnology {
    background-position: -460px 0;
  }
}
</style>
